<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>操作css样式</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }
        
        body {
            background: #DADBDC;
            position: relative;
        }
        
        div {
            margin: 0 auto;
            width: 300px;
            height: 300px;
        }
        
        #box1 {
            border: 1px solid #c84e15;
        }
        
        #box2 {
            border: 1px solid #154bc8;
        }
        
        .change {
            position: relative;
            transition: 3s;
            background-color: #b315c8;
        }
    </style>
</head>

<body>
    <div id="box1"></div>
    <div id="box2"></div>
</body>

</html>
<script>
    let box1 = window.document.querySelector('#box1');
    let box2 = window.document.querySelector('#box2');
    box1.onclick = function(param) {
        box1.style.backgroundColor = '#0F0';
        box1.style.width = '150px';
        box1.style.height = '150px';
    };
    box1.ondblclick = function(param) {
        box1.style.backgroundColor = '#DADBDC';
        box1.style.width = '300px';
        box1.style.height = '300px';
    };
    box2.onclick = function(param) {
        this.className = 'change';
    };
</script>